Created:01/10/2018
By: TeamXcel
Thank you for purchasing our landing page. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The landing page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="TeamXcel">
<title>Stela || minimal portfolio template</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Font Awesome Icons CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Themify Icons CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Elegant Font Icons CSS -->
<link rel="stylesheet" href="css/elegant-font-icons.css">
<!-- Elegant Line Icons CSS -->
<link rel="stylesheet" href="css/elegant-line-icons.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- CSS Animation -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox/venobox.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Slick Nav CSS -->
<link rel="stylesheet" href="css/slicknav.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader-wrap">
<div class="spinner"></div>
</div><!-- Preloader -->
<header id="header" class="header-section">
</header><!-- /Header Section -->
<div class="header-height"></div>
<section class="hero-section">
</section><!-- /Hero Section -->
<section class="portfolio-section bg-white padding">
</section><!-- /Portfolio Section -->
<section class="footer-section">
</section><!-- /Widget-section -->
<footer class="copyright-text text-center">
<p>© 2018 Stela By TeamXcel</p>
</footer><!-- /copyright-text -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Tether JS -->
<script src="js/vendor/tether.min.js"></script>
<!-- Imagesloaded JS -->
<script src="js/vendor/imagesloaded.pkgd.min.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- isotope JS -->
<script src="js/vendor/jquery.isotope.v3.0.2.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- venobox JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- ajaxchimp JS -->
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<!-- Slick Nav JS -->
<script src="js/vendor/jquery.slicknav.min.js"></script>
<!-- Wow JS -->
<script src="js/vendor/wow.min.js"></script>
<!-- Contact JS -->
<script src="js/contact.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header-section"> <div class="main-header"> <div class="container"> <div class="bottom-content-wrap row"> <div class="col-sm-4"> <div class="site-branding"> <a href="#"><img src="img/logo.png" alt="Brand"></a> </div> </div> <div class="col-sm-8 text-right"> <ul id="mainmenu" class="nav navbar-nav nav-menu"> <li class="active"> <a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="blog.html">Blog</a> <ul> <li><a href="blog-single.html">Blog Single</a></li> </ul> </li> <li> <a href="contact.html">Contact</a></li> </ul> </div> </div> </div> </div> </header><!-- /Header Section -->
<section class="hero-section"> <div class="container"> <div class="hero-content text-center"> <h1>We're a digital creative studio that creates <br> brand and digital experiences.</h1> </div> </div> <span class="scroll-down"></span> </section><!-- /Hero Section -->
<section class="portfolio-section bg-white padding"> <div class="container"> <div class="row"> <ul class="portfolio-filter text-center mb-30"> <li class="active" data-filter="*">All</li> <li data-filter=".branding">Branding</li> <li data-filter=".design">Design</li> <li data-filter=".wordpress">Wordpress</li> <li data-filter=".marketing">Marketing</li> </ul><!-- /.Work filter --> </div> <div class="row portfolio-items"> <div class="col-md-4 col-sm-6 pd-15 single-item branding design"> <div class="portfolio-box"> <img src="img/portfolio-1.jpg" alt="img"> <div class="portfolio-inner"> <div class="portfolio-content"> <h3><a href="portfolio-single.html">Light Books</a></h3> <span>Branding</span> </div> </div> </div> </div><!-- /Portfolio-1 --> </div> <div class="load-more-btn text-center mt-30"> <a href="#" class="default-btn">Load More Projects</a> </div> </div> </section><!-- /Portfolio Section -->
<section class="footer-widget-section padding"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 xs-padding"> <div class="footer-widget"> <h2 class="text-white">Stela.</h2> <div class="sep"></div> <p class="mb-0">Stela will help you to make any website like creative startups, professional photographer, portfolio agency or other business very easily as it has been coded in Bootstrap and CSS3.</p> </div> </div> <div class="col-md-4 col-sm-6 xs-padding"> <div class="footer-widget"> <ul class="address"> <li><i class="fa fa-phone"></i> <a href="mailto:+1234 567 8905">+1234 567 8905</a></li> <li><i class="fa fa-envelope-o"></i> <a href="mailto:email@yourdomain.com">email@yourdomain.com</a></li> <li><i class="fa fa-map-marker"></i> 60 Grand Avenue. Central New Road 0708, USA</li> </ul> <ul class="social-icon"> <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li> <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li> <li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li> <li class="pinterest"><a href="#"><i class="fa fa-pinterest"></i></a></li> <li class="dribbble"><a href="#"><i class="fa fa-dribbble"></i></a></li> </ul> </div> </div> <div class="col-md-4 col-sm-6 xs-padding"> <div class="footer-widget"> <h2 class="text-white">About me.</h2> <div class="sep"></div> <p class="mb-0">I believe that every client Business more management is a holistic management approach focused on aligning all aspects organization with the wants and needs of clients.</p> </div> </div> </div> </div> </section><!-- /.footer-widget-section -->
<footer class="copyright-text text-center"> <p>© 2018 Stela By TeamXcel</p> </footer><!-- /copyright-text -->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js
smooth-scroll.min.js
owl.carousel.min.js
jquery.ajaxchimp.min.js
jquery-1.12.4.min.js
jquery.mb.YTPlayer.min.js
owl.carousel.min.js
venobox.min.js
wow.min.js
jquery.counterup.min.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
TeamXcel